<template>
  <div>
    <div class="van-swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <a href="javascript:;">
            <img src="http://liufusong.top:8080/img/swiper/1.png" alt />
          </a>
        </van-swipe-item>
        <van-swipe-item>
          <a href="javascript:;">
            <img src="http://liufusong.top:8080/img/swiper/2.png" alt />
          </a>
        </van-swipe-item>
        <van-swipe-item>
          <a href="javascript:;">
            <img src="http://liufusong.top:8080/img/swiper/3.png" alt />
          </a>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="home-search">
      <van-search v-model="value" show-action placeholder="请输入小区或地址" background="none">
        <template #label>
          <span @click="toCityList" >{{city}}</span>
          <van-icon name="arrow-down" size="12" color="#000" />
        </template>
        <template #action>
          <van-icon @click="$router.push('/cityMap')" name="map-marked" size="25" color="#fff" />
        </template>
      </van-search>
    </div>
    <div class="home-grid">
      <van-grid :border="false" :column-num="4">
        <van-grid-item>
          <van-image :src="zhengzu" width="60px" height="60px" />
          <div class="txt">整租</div>
        </van-grid-item>
        <van-grid-item>
          <van-image :src="hezu" width="60px" height="60px" />
          <div class="txt">合租</div>
        </van-grid-item>
        <van-grid-item to="/cityMap">
          <van-image :src="ditu" width="60px" height="60px" />
          <div class="txt">地图找房</div>
        </van-grid-item>
        <van-grid-item to="/houseRelease">
          <van-image :src="chuzu" width="60px" height="60px" />
          <div class="txt">去出租</div>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="zf-group">
      <van-cell title="租房小组" value="更多" size="large" />
      <van-grid direction="horizontal" :column-num="2" :border="false" gutter='10px'>
        <van-grid-item  style="height=60px">
          <van-image src="http://115.159.87.220:8080/img/groups/1.png" width="50px" height="50px" />
          <div class="txt">
            <p>家住回龙观</p>
            <p>归属的感觉</p>
          </div>
        </van-grid-item>
        <van-grid-item style="height=60px">
          <van-image src="http://115.159.87.220:8080/img/groups/1.png" width="50px" height="50px" />
          <div class="txt">
            <p>宜居四五环</p>
            <p>大都市生活</p>
          </div>
        </van-grid-item>
        <van-grid-item style="height=60px">
          <van-image src="http://115.159.87.220:8080/img/groups/1.png" width="50px" height="50px" />
          <div class="txt">
            <p>喧嚣三里屯</p>
            <p>繁华的背后</p>
          </div>
        </van-grid-item>
        <van-grid-item style="height=60px">
          <van-image src="http://115.159.87.220:8080/img/groups/1.png" width="50px" height="50px" />
          <div class="txt">
            <p>比邻十号线</p>
            <p>地铁心连心</p>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'HaokezfHome',

  data () {
    return {
      zhengzu:
        '',
      hezu: '',
      ditu: '',
      chuzu:
        '',
      value: ''
    }
  },
  computed: {
    ...mapState(['city'])
  },

  mounted () {},

  methods: {
    toCityList () {
      this.$router.push('/citylist')
    }
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.my-swipe .van-swipe-item {
  height: 212px;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  img {
    width: 100%;
  }
}
.home-search {
  width: 93%;
  height: 34px;
  padding: 0 20px;
  position: absolute;
  top: 20px;
  left: 0;
  /deep/ .van-search__content {
    background-color: #fff;
  }
  /deep/ .van-search__label {
    padding: 0 10px;
  }
  /deep/ .van-icon-search {
    padding: 0 2px 0 12px;
    border-left: 1px solid #f5f5f5;
  }
  /deep/ .van-icon-map-marked {
    margin-left: 10px;
    line-height: 34px;
  }
}
.home-grid {
  height: 121px;
  font-size: 14px;
  .txt {
    font-size: 14px;
    color: #333;
    margin: 12px 0;
  }
}
.zf-group {
  min-height: 187px;
  background-color: #f6f5f6;
  padding-bottom: 10px;
}
</style>
